<template>
    <div v-bind:class="{'wizard-step': true, 'active': isActive, 'previous' : isPrevious, 'next' : isNext}" v-on:click.prevent="changeCurrentIndex()">
        <div class="wizard-progress">
            <div class="wizard-progress-value"></div>
        </div>
        <div class="wizard-icon">
            <div class="icon-icon"><span v-bind:class="[icon]" v-if="icon"></span></div>
            <div class="icon-number" v-if="!icon">{{iconNumber || index +1}}</div>
        </div>
        <div class="wizard-content">
            <div class="title">{{title}}</div>
            <div class="description">{{description}}</div>
        </div>
        <div class="step-info">
             第 {{index+1}}/{{$parent.countItems}} 步
        </div>
    </div>
</template>

<script>
/**
 * @author guocailee
 */
import { changeLocation } from 'src/utils/utils.js'
export default {
  name: 'wizardStep',
  replace: true,
  data () {
    return {
      index: null,
      active: false
    }
  },
  computed: {
    isActive () {
      return (this.$parent.currentIndex === this.index)
    },
    isPrevious () {
      // every step before current index
      return this.$parent.currentIndex > this.index
    },
    isNext () {
      // everything after current index
      return this.$parent.currentIndex < this.index
    }
  },
  props: {
    link: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: false
    },
    iconNumber: {
      type: String,
      default: false
    },
    title: {
      type: String,
      default: false
    },
    description: {
      type: String,
      default: ''
    },
    progress: {
      type: Number,
      default: 0
    },
    valid: {
      type: Boolean,
      default: false
    },
    disablePrevious: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    changeCurrentIndex () {
      if (this.$parent.changeCurrentIndex(this.index) && this.link) {
        // redirect user to the new location
        changeLocation(this.$router, this.link)
      }
    }
  },
  watch: {
    progress (val) {
      this._progressBar.style.width = val + '%'
      if (val === 100) {
        this.valid = true
      } else {
        this.valid = false
      }
    },
    valid (val) {
      if (val) {
        this.progress = 100
      }
    }
  },
  ready () {
    this._progressBar = this.$el.querySelector('.wizard-progress-value')
  }
}
</script>